$(document).ready(function () {
    $('.page').on('click', 'li.add a', function (e) {
        e.preventDefault();
        var me = $(this);
        $.get(
            me.attr('href'),
            function (data) {
                $.magnificPopup.open({
                    items: {
                        src: '<div class="white-popup">' + data + '</div>', // can be a HTML string, jQuery object, or CSS selector
                        type: 'inline'
                    },
                    callbacks: {
                        open: function (e) {
                            $(this)[0].content.on('click', 'a.add_widget', function (e) {
                                e.preventDefault();
                                var a = $(this);
                                var widget = a.data('widget');
                                $.get(
                                    a.attr('href'),
                                    {widget: widget},
                                    function (data) {
                                        var li = me.closest('li');
										var oldHtml = li[0].outerHTML;
                                        li.data('widget', widget)
                                            .find('div.content')
                                            .html(data.html);
                                        window[widget + "InitEdit"](li);
                                        $.magnificPopup.close();
										li.closest('ul.gridster').data('gridster').add_widget(oldHtml.toString());
                                    }
                                )
                            })
                        }
                    }
                });
            });
    })
        .on('submit', 'li.gs-w form', function (e) {
            e.preventDefault();
            var me = $(this);
            var li = me.closest('li');
            var widget_type = li.data('widget');
            var page_id = me.closest('.page').data('id');
            var grid = JSON.stringify(gridster['page-' + page_id].serialize());
            var plugin_init_save = window[widget_type + "InitSave"];
            var value = $(this).find('#WidgetValue').val();
            if (plugin_init_save)
                value = plugin_init_save(li);

            var data = {
                grid: grid,
                widget: widget_type,
                id_page: page_id,
                value: value
            };
            if (li.hasClass('edit'))
                data.id_widget = li.data('id_widget');

            $.post(
                me.attr('action'),
                data,
                function (data) {
                    notify('top-right', 'The widget has been saved', 'info', 2000);
                    var plugin_init = window[widget_type + "InitView"];
                    if (plugin_init)
                        plugin_init(li);

                    li.removeClass('add edit')
                        .attr('data-widget', widget_type)
						.data('id_widget', data.id)
                        .find('div.content')
                        .html(data.html);
                }
            )
        })
        .on('click', 'div.widget-handle > a.edit', function (e) {
            e.preventDefault();
            var a = $(this);
            var li = a.closest('li');
            $.get(
                a.attr('href'),
                {
                    id_widget: li.data('id_widget'),
                    widget: li.data('widget')
                },
                function (data) {
                    li.addClass('edit')
                        .find('div.content')
                        .html(data);
                    window[li.data('widget') + "InitEdit"](li);
                }
            )
        })
        .on('click', 'div.widget-handle > a.delete', function (e) {
            e.preventDefault();
            var a = $(this);
            var li = a.closest('li');
            $.post(
                a.attr('href'),
                {
                    id_widget: li.data('id_widget')
                },
                function (data) {
					var id = $('.page.active').attr('id');
					gridster[id].remove_widget(li);
					updateGrid(id, JSON.stringify(gridster[id].serialize()));
                }
            )
        });
});